<template>
    <div class="view" @mouseover="clear" @mouseout="autoplay">
        <div class="banners">
            <transition :name="move" v-for="(item,index) in urls" :key="item">
                <img v-show="index==num" :src="item" alt />
            </transition>
        </div>
        <div class="arrow arrow-left el-icon-arrow-left" @click="prev"></div>
        <div class="arrow arrow-right el-icon-arrow-right" @click="next"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            move: "right",
            timer: null,
            num: 0,
            urls: [
                "images/a.jpg",
                "images/b.jpg",
                "images/c.jpg",
                "images/d.jpg",
                "images/e.jpg"
            ]
        };
    },
    created() {},
    methods: {
        clear() {
            clearInterval(this.timer);
        },
        autoplay() {
            this.timer = setInterval(this.next.bind(this), 2000);
        },
        next() {
            this.move = "right";
            this.num++;
            if (this.num > this.urls.length - 1) {
                this.num = 0;
            }
        },
        prev() {
            this.move = "left";
            this.num--;
            if (this.num < 0) {
                this.num = this.urls.length - 1;
            }
        }
    }
};
</script>
<style scoped>
.view {
    width: 1200px;
    height: 500px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 20px;
}
.view img {
    position: absolute;
}
.arrow {
    position: absolute;
    top: 230px;
    font-size: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    background: purple;
    opacity: 0.6;
    transition: all 0.5s;
}
.arrow:hover {
    opacity: 1;
    color: white;
}
.arrow-left {
    left: -50px;
}
.arrow-right {
    right: -50px;
}
.view:hover .arrow-left {
    left: 20px;
}
.view:hover .arrow-right {
    right: 20px;
}
.right-enter {
    transform: translateX(100%);
}
.right-leave-to {
    transform: translateX(-100%);
}
.right-enter-active,
.right-leave-active {
    transition: all 0.5s;
}
.left-enter {
    transform: translateX(-100%);
}
.left-leave-to {
    transform: translateX(100%);
}
.left-enter-active,
.left-leave-active {
    transition: all 0.5s;
}
</style>